<!--环境监测数据-->
<!DOCTYPE HTML>
<html lang="cn" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <%include("/common/header.html",{title:''}){}%>
    <title>数据配置</title>
    <style>

    </style>
</head>
<body>

<div class="x-nav" style="margin: 20px auto auto 15px;">
      <span class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
        <a href="javascript:">详细数据</a><span lay-separator="">/</span>
        <a><cite>环境检测数据</cite></a>
      </span>
    <a class="layui-btn layui-btn-primary layui-btn-small" style="margin: -5px 14px 0px 0px;float:right;"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon layui-icon-refresh-3"></i>
    </a>
</div>

<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div id="container" style="height: 400px;width: 100%"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div id="containers" style="height: 400px;width: 100%"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div id="containerOne" style="height: 400px;width: 100%"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<%include("/common/foot.html"){}%>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
    $(function () {

        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        var colors = ['#5793f3', '#d14a61', '#675bba'];

        option = {
            xAxis: {
                name: '时间t',
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                name: '风速(单位m/s)',
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line'
            }]
        };

        myChart.setOption(option, true);

        var dom = document.getElementById("containers");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        var colors = ['#5793f3', '#d14a61', '#675bba'];
        option = {
            title: {
                text: ''
            },
            tooltip: {},
            legend: {
                data: null
            },
            radar: {
                // shape: 'circle',
                name: {
                    textStyle: {
                        color: '#fff',
                        backgroundColor: '#999',
                        borderRadius: 3,
                        padding: [3, 5]
                    }
                },
                indicator: [
                    {name: '北', max: 6500},
                    {name: '北北西', max: 16000},
                    {name: '西北', max: 30000},
                    {name: '西西北', max: 38000},
                    {name: '西', max: 52000},
                    {name: '西西南', max: 25000},
                    {name: '西南', max: 25000},
                    {name: '南南西', max: 25000},
                    {name: '南', max: 25000},
                    {name: '南南东', max: 25000},
                    {name: '东南', max: 25000},
                    {name: '东东南', max: 25000},
                    {name: '东', max: 25000},
                    {name: '东东北', max: 25000},
                    {name: '东北', max: 25000},
                    {name: '北东东', max: 25000},
                ]
            },
            series: [{
                name: '',
                type: 'radar',
                // areaStyle: {normal: {}},
                data: [
                    {
                        value: [4300, 10000, 28000, 35000, 50000, 19000],
                        name: ''
                    },
                    {
                        value: [5000, 14000, 28000, 31000, 42000, 21000],
                        name: ''
                    }
                ]
            }]
        };
        myChart.setOption(option, true);

        var dom = document.getElementById("containerOne");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        var colors = ['#5793f3', '#d14a61', '#675bba'];
        option = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            // legend: {
            //     data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
            // },
            grid: {
                left: '3%',
                right: '5%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                name: "  时间t",
                nameLocation:'end',
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: [
                {
                    name: "温度(单位℃)",
                    type: 'value'
                },
                {
                    name: '湿度(单位%rh)',
                    nameLocation: 'end',
                    min:0,
                    max: 100,
                    type: 'value',
                    inverse: false,
                    axisLabel: {
                        show: true,
                        interval: "auto",
                        formatter: "{value}%"
                    },
                }
            ],
            series: [
                {
                    name: '邮件营销',
                    type: 'line',
                    stack: '总量',
                    data: [3, 4, 5, 1, 2, 3, 5]
                },
                {
                    name: '联盟广告',
                    type: 'line',
                    stack: '总量',
                    data: [1, 3, 4, 5, 4, 2, 3]
                },
            ]
        };

        myChart.setOption(option, true);


    });
</script>
</body>
</html>